<template>
  <div id="information">
    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList($route.query.id)">
      <el-form-item>
        <el-input v-model="dataForm.key" style="width: 200px;" placeholder="输入受助者名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-select style="width: 200px;margin-left: 20px" v-model="dataForm.isHelpDescriptionComplete" clearable placeholder="是否已完善帮助描述">
          <el-option v-for="item in helpType" :key="item.key" :label="item.value" :value="item.key">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getDataList($route.query.id)">查询</el-button>
      </el-form-item>
    </el-form>
    <div style="float: left">
      本次活动：{{ activityName }}。受助者：{{ acceptNum }}名。
    </div>
    <div style="float: left" v-if="this.$store.state.user.loginUser.role!=1 && this.$store.state.user.loginUser.role!=2">
      您对接受助者：{{ yourPeopleNum }} 名
    </div>
    <span style="float: right;margin-bottom: 10px">
      <el-button type="primary" @click="exportRecord($route.query.id)">打印所有表格</el-button>
    </span>
    <br>
    <br>
    <el-table border :data="tableData">
      <el-table-column
          prop="name"
          header-align="center"
          align="center"
          label="姓名">
      </el-table-column>
      <el-table-column
          prop="age"
          header-align="center"
          align="center"
          label="年龄">
      </el-table-column>
      <el-table-column
          prop="identityId"
          header-align="center"
          align="center"
          label="身份证号">
      </el-table-column>
      <el-table-column
          prop="categoryName"
          header-align="center"
          align="center"
          label="类别">
      </el-table-column>
      <el-table-column
          header-align="center"
          align="center"
          label="性别">
        <template v-slot:default="scope">
          {{ scope.row.gender === 0 ? "男" : "女" }}
        </template>
      </el-table-column>
      <el-table-column
          prop="address"
          header-align="center"
          align="center"
          label="居住地">
      </el-table-column>
      <el-table-column
          prop="fellowName"
          header-align="center"
          align="center"
          label="对接人">
      </el-table-column>
      <el-table-column
          prop="fellowTel"
          header-align="center"
          align="center"
          label="对接人电话">
      </el-table-column>
      <el-table-column
          prop="detail"
          header-align="center"
          align="center"
          label="帮助描述">
      </el-table-column>
      <!-- <el-table-column
  prop="detailPic"
  header-align="center"
  align="center"
  label="图片">
  <template slot-scope="scope">
    <div v-for="(picUrl, index) in scope.row.detailPic" :key="index">
      <img :src="picUrl" style="width: 100px;height: 100px">
    </div>
  </template>
</el-table-column> -->
      <el-table-column
          prop="operation"
          header-align="center"
          align="center"
          label="操作">
        <template v-slot:default="scope">
          <el-button type="primary" @click="UpdateHandle(scope.row.activityRecordId)">编辑</el-button>
          <el-button v-if="scope.row.detailPic.length>0" type="primary" @click="handlePictureCardPreview(scope.row.detailPic)" >查看图片</el-button>
        </template>
      </el-table-column>
    </el-table>
    <ImageView
            :previewVisible="Previewshow" 
            :urlList=preVeiwUrlList 
            @update:previewVisible="previewVisible = $event"
            @close="closeImageViewer"
            />
    <update v-if="UpdateVisible" ref="Update" @refreshDataList="getDataList(routeId)"></update>
  </div>
</template>

<script>
import service from "@/utils/httpRequest";
import Update from "./information-add-or-update.vue";
import ImageView from '@/components/ImageView.vue';

export default {
  name: 'information',
  components: {Update,ImageView},
  data() {
    return {
      dataForm: {
        id:'',
        key: '',
        isHelpDescriptionComplete:''
      },
      UpdateVisible: false,
      Previewshow: false,
      preVeiwUrlList: [],
      // initialIndex: 0,
      //活动id
      id:'',
      //活动名称
      activityName: '',
      //受助者人数
      acceptNum: 0,
      tableData: [],
      routeId: this.$route.query.id,
      helpType: [
        {
          key: false,
          value: '未完善'
        },
        {
          key: true,
          value: '已完善'
        }
      ]
    }
  },
  computed: {
    yourPeopleNum() {
      return this.tableData.length
    }
  },
  methods: {
    exportRecord(id) {
      this.$confirm(`确定导出数据吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        service({
          method: 'GET',
          url: `/lovehelp/activity/exportrecipientsactivity/${id}`
        }).then(res => {
          if (res.code === 200) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
            })
          } else {
            this.$message.error(res.msg)
          }
        })
      }).catch(() => {
        this.$message.info("已取消导出");
      })
    },
    // 修改
    UpdateHandle(id) {
      this.UpdateVisible = true
      this.$nextTick(() => {
        this.$refs.Update.init(id)
      })
    },
    getDataList(id) {
      this.dataForm.id = id;
      service({
        method: 'GET',
        url: `lovehelp/activity/recipientsOfActivity`,
        params:{
          id: this.dataForm.id,
          key: this.dataForm.key,
          isHelpDescriptionComplete: this.dataForm.isHelpDescriptionComplete
        }
      }).then(res => {
        if (res.code === 200) {
          console.log(res)
          this.id = id;
          this.activityName = res.recipientsOfActivity.name;
          this.acceptNum = res.recipientsOfActivity.recipientNum;
          this.tableData = res.recipientsOfActivity.recipients;
          //针对tableData里面的每个元素的detailPic进行处理
          this.tableData.forEach(item => {
              if (typeof item.detailPic ==='string' && item.detailPic.trim()!== '') {
                  item.detailPic = item.detailPic.split(',');
              } else {
                  // 如果detailPic不是字符串或者为空，设置为空数组
                  item.detailPic = [];
              }
          });
        } else {
          this.$message.error(res.msg)
        }
        console.log(this.tableData)
      })
    },
    handlePictureCardPreview(file) {
      this.preVeiwUrlList = file;
      // console.log(file);
      this.Previewshow = true;
      // this.initialIndex = this.uploadFileList.findIndex(item => item.uid === file.uid);     
    },
    closeImageViewer() {
      this.Previewshow = false;
    },
  },
  mounted() {
    this.getDataList(this.routeId)
  }
}
</script>

<style scoped>

</style>